<template>
  <div class="customer">
    <div class="search">
      <div class="visited_history_info">
        <div class="product">
          <span class="search_text">产品：</span>
          <span class="search_text">{{history_visited.productName}}</span>
        </div>
        <div class="name">
          <span class="search_text">代表：</span>
          <span class="search_text">{{history_visited.repName}}</span>
        </div>
        <div class="doctor">
          <span class="search_text">医生：</span>
          <span class="search_text">{{history_visited.doctorName}}</span>
        </div>
      </div>
      <div class="search_list">
        <!-- <div class="recruiting_status">
          <span class="search_text">拜访方式:</span>
          <el-select v-model="visitedType" placeholder="请选择">
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="item in visited_type"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div> -->
        <div class="block" style="margin-right:13px">
          <span class="search_text">时间：</span>
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="search_button">
          <el-button type="primary" @click="search_detail">查询</el-button>
          <el-button @click="resetSearchList">重置</el-button>
        </div>
      </div>
    </div>
    <div class="customer_list">
      <el-table
        :data="visited_detail_list"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#E9EEF7',color:'#606266'}"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="id"
          label="录音编号"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="operationTime"
          label="外呼时间"
          min-width="160">
        </el-table-column>
        <el-table-column
          prop="callDuration"
          label="时长"
          min-width="100">
        </el-table-column>
        <!-- <el-table-column
          prop="withDrug"
          label="是否有药"
          min-width="100">
        </el-table-column> -->
        <!-- <el-table-column
          prop="isTarget"
          label="目标客户"
          min-width="100">
        </el-table-column> -->
        <!-- <el-table-column
          prop="withAe"
          label="是否有AE"
          min-width="100">
        </el-table-column> -->
        <!-- <el-table-column
          prop="isRecruit"
          label="是否招募"
          min-width="100">
        </el-table-column> -->
        <!-- <el-table-column
          prop="isCover"
          label="是否覆盖"
          min-width="100">
        </el-table-column> -->
        <!-- <el-table-column
          prop="isLost"
          label="是否脱落"
          min-width="100">
        </el-table-column> -->
        <!-- <el-table-column
          prop="clientGrade"
          label="医生等级"
          min-width="100"
          show-overflow-tooltip>
        </el-table-column> -->
        <!-- <el-table-column
          prop="visitsNumber"
          label="拜访次数"
          min-width="100"
          show-overflow-tooltip>
        </el-table-column> -->
        <!-- <el-table-column
          prop="purposeItem"
          label="拜访目的"
          show-overflow-tooltip>
        </el-table-column> -->
        <el-table-column
          prop="resultItem"
          label="拜访结果"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="220">
          <template slot-scope="scope">
            <el-button @click="show_recording(scope.row)" type="text">查看录音</el-button>
            <el-button type="text" v-if="scope.row.tapeUrl">
              <a :href="scope.row.tapeUrl" target="_blank" download>下载录音</a>
            </el-button>
            <el-button type="text" v-if="!scope.row.tapeUrl" @click="download_recording_promit">
              <a>下载录音</a>
            </el-button>
            <el-button @click="representative_write(history_visited,scope.row)" :disabled="!scope.row.isFillIn"
                       type="text">拜访补填
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 展示录音详情 -->
    <div class="show_recording" v-if="is_show_recording">
      <div class="contain">
        <div class="title">
          <span>录音详情</span>
          <i class="el-icon-close" @click="close_recording"></i>
        </div>
        <div class="line"></div>
        <div class="content">
          <div class="audio_number">
            <span>录音{{recording_number}}</span>
          </div>
          <div class="audio_content" v-if="recording_url">
            <div class="play_button" @click="changePlay">
              <img v-if="audio.play" src="../../assets/common/play.png" alt="">
              <img v-else src="../../assets/common/stop.png" alt="">
            </div>
            <div class="audio_slider">
              <el-slider
                v-model="audio.audio_slider"
                :show-tooltip="false"
                :format-tooltip="formatProcessToolTip"
                @input="changeCurrentTime"></el-slider>
              <div class="audio_time">
                <span>{{parseInt(audio.currentTime) | formatAudioTime}}</span>
                <span>{{parseInt(audio.duration) | formatAudioTime}}</span>
              </div>
            </div>
            <audio
              :src="recording_url"
              ref="audio"
              @timeupdate="onTimeUpdate"
              @loadedmetadata="onLoadedMetaData"
            ></audio>
          </div>
          <div class="audio_content" v-if="!recording_url" style="margin-top:100px;">
            <span>暂无录音</span>
          </div>
        </div>
      </div>
    </div>
    <pagination :page="page" @changeCurrentPage="handleCurrentChange"/>
  </div>
</template>

<script>
  import {api, baseAjax} from '../../api/api';
  import Cookies from 'js-cookie';
  import {statusCode} from '../../utils/index';
  import {formatDate, formatTime} from '../../utils/validate';
  import router from "@/router";
  import pagination from '../public/pagination';

  export default {
    components:{
      pagination,
    },
    data() {
      return {
        history_visited: {},
        visited_detail_list: [],   //列表数据
        visitedType: '1',  //拜访方式
        time: [],   //时间
        user_info: {},
        is_show_recording: false,   //是否展示录音详情弹框
        recording_number: '',   //录音编号
        recording_url: '',  //录音url
        page: {
          currentPage: 1,    //当前页
          pageSize: 10,    //每页显示条数
          totalPage: 0,   //总页数
          count: 0   //总条数
        },
        audio: {
          play: false,   //是否播放
          currentTime: 0,   //当前播放时间
          duration: 0,  //录音总时长
          audio_slider: 0
        },
        visited_type: [  //拜访方式
          {
            id: '1',
            label: '电话'
          }, {
            id: '2',
            label: '微信'
          }, {
            id: '3',
            label: '短信'
          }, {
            id: '4',
            label: '邮件'
          }, {
            id: '5',
            label: '面访'
          }
        ]
      }
    },
    mounted() {
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      this.history_visited = JSON.parse(Cookies.get('history_visited_info'));
      //获取历史拜访记录详情
      this.getHistoryVisitedInfo();
    },
    methods: {
      //修改列表隔行颜色
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'success_row';
        }
        return '';
      },
      //获取历史拜访记录详情
      getHistoryVisitedInfo() {
        let that = this;
        let start_time = this.time && this.time.length ? formatDate(this.time[0]) : '';
        let end_time = this.time && this.time.length ? formatDate(this.time[1]) : '';
        let data = 'currentPage=' + this.page.currentPage + '&totalPage=' + this.page.totalPage + '&pageSize=' + this.page.pageSize + '&startRows=0&agentNo=' + this.user_info.agentNo + '&channel=11&calledNo=""&doctorId=' + this.history_visited.doctorId + '&repId=' + this.user_info.repId + '&startDateTime=' + start_time + '&endDateTime=' + end_time;
        api.history_visit_detail = {
          url: api.history_visit_detail_url + '?' + data,
          method: api.history_visit_detail.method
        }
        baseAjax(api.history_visit_detail, '', (res) => {
          if (res.code === statusCode.success) {
            let {value, count, currentPage, pageSize, totalPage} = res.data;
            that.visited_detail_list = value;
            that.visited_detail_list.forEach(item => {
              item.purposeItem = item.purposeItem ? item.purposeItem : '无';
              item.resultItem = item.resultItem ? item.resultItem : '无';
            });
            that.page.count = count;
            that.page.currentPage = currentPage;
            that.page.pageSize = pageSize;
            that.page.totalPage = totalPage;
          } else if (res.code === statusCode.not_login) {
            that.$alert('用户未登录,请重新登录').then(() => {
              that.$store.dispatch('user/resetToken').then(() => {
                location.reload()  // 为了重新实例化vue-router对象 避免bug
              })
              that.$router.replace('/login');
            });
          }
        });
      },
      //查询列表
      search_detail() {
        this.getHistoryVisitedInfo();
      },
      //查看录音
      show_recording(info) {
        this.audio.currentTime = '00:00:00';
        this.audio.duration = '00:00:00';
        this.audio.audio_slider = 0;
        this.audio.play = false;
        this.is_show_recording = true;
        this.recording_number = info.id;
        this.recording_url = info.tapeUrl;
      },
      //无录音下载提示
      download_recording_promit() {
        this.$alert('暂无可下载的录音', {
          dangerouslyUseHTMLString: true
        });
      },
      //关闭录音弹框
      close_recording() {
        this.is_show_recording = false;
      },
      //改变播放按钮
      changePlay() {
        if (this.audio.play === false) {
          this.audio.play = true;
          this.play();
        } else {
          this.audio.play = false;
          this.pause();
        }
      },
      //播放录音
      play() {
        this.$refs.audio.play();
      },
      //暂停录音
      pause() {
        this.$refs.audio.pause();
      },
      //更新当前播放时间
      onTimeUpdate(val) {
        this.audio.currentTime = val.target.currentTime;
        this.audio.audio_slider = parseInt(this.audio.currentTime / this.audio.duration * 100);
        if (val.target.currentTime === val.target.duration) {
          this.audio.play = false;
        }
      },
      //录音总时长
      onLoadedMetaData(val) {
        this.audio.duration = val.target.duration;
      },
      //拖动进度条,改变当前时间
      changeCurrentTime(index) {
        this.audio.currentTime = parseInt(index / 100 * this.audio.duration);
      },
      //格式化进度条
      formatProcessToolTip(index) {
        index = parseInt(this.audio.duration / 100 * index);
        return formatTime(index);
      },
      //重置搜索
      resetSearchList() {
        this.time = [];
      },
      //代表填报
      representative_write(history_visited, row) {
        if (!row.tapeUrl) {
          this.$store.state.calls.doctorId = history_visited.doctorId;
          this.$store.state.calls.selected_product_id = Number(history_visited.productId);
          this.$store.state.calls.sinToken = row.sinToken;
          this.$store.state.calls.is_deal_promit = true;
          this.$store.state.calls.is_not_call_button = true;
        } else {
          this.$store.state.calls.doctorId = history_visited.doctorId;
          this.$store.state.calls.selected_product_id = Number(history_visited.productId);
          this.$store.state.calls.sinToken = row.sinToken;
          this.$store.state.calls.supplement = true;
          router.push('/visit_register');
        }
      },
      //改变当前页码
      handleCurrentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.getHistoryVisitedInfo();
      },
    },
    filters: {
      formatAudioTime(time) {
        return formatTime(time);
      }
    }
  }
</script>

<style lang="less" scoped>
  .customer {
    .search {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;

      .visited_history_info {
        display: flex;
        margin-bottom: 32px;
        margin-top: 9px;

        div {
          margin-right: 45px;
        }
      }

      .search_list {
        display: flex;
        margin-bottom: 20px;
        align-items: center;

        .search_text {
          margin-right: 11px;
        }

        .block {
          /deep/ .el-date-editor {
            height: 34px;

            .el-range__icon, .el-range-separator, .el-range__close-icon {
              line-height: 28px;
            }
          }
        }

        /deep/ .el-select {
          margin-right: 13px;

          .el-input {
            input {
              width: 151px !important;
              height: 34px !important;
            }
          }
        }
      }

      .search_button {
        display: flex;

        .el-button {
          width: 65px;
          height: 34px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .customer_list {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;

      /deep/ .el-table {
        color: #3B4859;

        thead {
          color: #3B4859;
        }

        th, td {
          text-align: center;
        }

/*        td {
          .cell {
            .el-button {
              color: #FFA940;
            }
          }
        }*/

        .success_row {
          background-color: #F8F9FB !important;
        }
      }

      /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: none;
      }
    }

    .show_recording {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1001;
      display: flex;
      justify-content: center;
      align-items: center;

      .contain {
        width: 688px;
        height: 462px;
        background-color: #FFFFFF;
        border-radius: 5px;

        .title {
          padding: 20px 32px 20px 20px;
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #3B4859;

          i {
            cursor: pointer;
          }
        }

        .line {
          display: block;
          width: 100%;
          height: 1px;
          background-color: #E9EEF7;
        }

        .content {
          margin: 26px 78px 0 78px;

          .audio_number {
            margin-bottom: 23px;
          }

          .audio_content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .play_button {
              width: 34px;
              height: 34px;
              cursor: pointer;
              margin-bottom: 39px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .audio_slider {
              width: 100%;
              padding: 0 28px 0 28px;
              box-sizing: border-box;

              .audio_time {
                width: 100%;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #8998AC;
              }

              /deep/ .el-slider {
                .el-slider__runway {
                  .el-slider__button-wrapper {
                    .el-slider__button {
                      background-color: #409EFF;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
